var mcan;
var mctx;

var buil = new Image();
var clif = new Image();
var halfclif = new Image();
var black = new Image();
var frame = new Image();
var save = new Image();
var roof = new Image();
var normal = new Image();
var ranking = new Image();
var hero = new Image();
var arrow1 = new Image();
var arrow2 = new Image();
var arrow3 = new Image();
var fight = new Image();

var fra = 0;
var fra2 = 0;
var alpha = 0;
var alpha2 = 0;
var radian = 0;
var radian2 = 0;
var clifY = 87;
var ar1= 0;
var ar2 = 0;
var ar3 = -60;
var ar4 = 0;
var g = 9.8;
var t = 0;
var v = 80;
var radian3 = 0;
var i = 0;
var fra3 = 0;

function init() {
	mcan = document.getElementById('canmenu');
	mctx = mcan.getContext('2d');

	buil.src = "images/building.png";
	clif.src = "images/clif.png";
	halfclif.src = "images/halfclif.png";
	black.src = "images/black.png";
	frame.src = "images/frame.png";
	save.src = "images/saveit.png";
	roof.src = "images/roof.png";
	normal.src = "images/normal.png";
	ranking.src = "images/ranking.png";
	hero.src = "images/hero.png";
	arrow1.src = "images/arrow1.png";
	arrow2.src = "images/arrow2.png";
	arrow3.src = "images/arrow3.png";
	fight.src = "images/fighter.png";
};

function menu() {
	init();
 	menuloop()
}

function menuloop(){

	mctx.fillStyle = "#f5f4f0";
	mctx.fillRect(0, 0, 320, 480);

	mctx.drawImage(frame, 0, 80);
	mctx.drawImage(save, 200, 130);
	mctx.drawImage(normal,20,410);
	mctx.drawImage(ranking,200,380);
	mctx.drawImage(hero,205,240);
	mctx.drawImage(arrow1,220,80);
	mctx.drawImage(arrow2,220,180);
	mctx.drawImage(arrow3,220,410);

	clifAction();

	requestAnimFrame(menuloop);
}